<template>
    <div id='operate-user'>
        <h1 class="card-title">
           <!--  <p><span>运营人员管理</span></p> -->
            <div class="card-title__button-box" v-if='roleList.length'>
                <div class="form-item__value">
                    <select-group v-model='permissionSelect'>
                        <select-option value='' text='所有'></select-option>
                        <select-option v-for='item in roleList' :key='item.roleCode' :value='item.roleCode' :text='item.roleName'></select-option>
                    </select-group>
                </div>
                <div class="form-item__value">
                    <picker-date picker-id='startTime' :key='startTime' placeholder='请选择开始时间' v-model='startTime'></picker-date>
                </div>
                <div class="form-item__value">
                    <picker-date picker-id='endTime' :key='endTime' placeholder='请选择结束时间' v-model='endTime'></picker-date>
                </div>
                <a class="card-title__button" @click='reGetList'>确定</a>
                <button-loading :loading='loading_download' @click='getDownLoadUrl'>下载</button-loading>
            </div>
        </h1>
        <loading v-if='loading'></loading>
        <p class='no-data' v-if='!loading && !records.length'>暂无数据</p>
        <div class="table-list" v-if='!loading && records.length'>
            <table>
                <thead class="table-list__head">
                    <tr>
                        <th>姓名</th>
                        <th>角色</th>
                        <th>分配记录</th>
                        <th>处理记录</th>
                        <th v-if='role == "auth_operator"'>通过记录</th>
                        <th v-if='role == "auth_operator"'>通过转换率</th>
                        <th v-if='role == "loan_operator"'>成交记录</th>
                        <th v-if='role == "loan_operator"'>成交转换率</th>
                        <th v-if='role == "loan_operator"'>复借记录</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class='table-list__body have-border'>
                    <tr v-for='item in records'>
                        <td>
                            <div class="item-name">
                                <span class="item-status" :class='{offline:item.status === "OFFLINE"}'></span>
                                <p>{{ item.name || placeholder }}</p>
                            </div>
                        </td>
                        <td>
                            <div class='roles-list'>
                                <div class="tag__list"><p class='tag__item' v-for='roleItem in item.roles'>{{roleItem}} </p></div>
                            </div>
                        </td>
                        <td>{{ item.allotCount || placeholder }}</td>
                        <td>{{ item.dealCount || placeholder }}</td>
                        <td v-if='role == "auth_operator" || role == "loan_operator"'>{{ item.passCount || placeholder }}</td>
                        <td v-if='role == "auth_operator" || role == "loan_operator"'>{{ item.conversionRate || placeholder }}</td>
                        <td v-if='role == "loan_operator"'>{{ item.notFirstPassCount || placeholder }}</td>
                        <td>{{ item.statusStr || placeholder }}</td>
                        <td>
                            <div class='option-box'>
                                <span class='option-button' v-if='item.status == "WORKING"' @click='showConfirmStop(item)'>暂停分配订单</span>
                                <span class='option-button' v-else-if='item.status == "PAUSE"' @click='showConfirmStart(item)'>开始分配订单</span>
                                <span class='option-button' v-else>--</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <pagination
                :current-page='listInfo.pageNum'
                :total-page='listInfo.totalPage'
                @pageChange='getList'></pagination>
        </div>

        <confirm
            :show='show_confirm_stop'
            title='确认停止分配订单'
            :loading='loading_stop'
            @close='show_confirm_stop=false'
            @confirm='stop'>
        </confirm>

        <confirm
            :show='show_confirm_start'
            title='确认开始分配订单'
            :loading='loading_start'
            @close='show_confirm_start=false'
            @confirm='start'>
        </confirm>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import pickerDate from '../components/PickerDate.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import loading from '../components/Loading.vue'
    import tab from '../components/Tab.vue'
    import tabBox from '../components/TabBox.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import echarts from '../components/Echarts.vue'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { operateApi, systemApi, allApi, youxinApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            selectGroup,
            selectOption,
            echarts,
            loading,
            modal,
            tab,
            tabBox,
            confirm,
            buttonLoading,
            pagination,
            pickerDate
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                roleList:[],
                role:'',
                startTime:'',
                endTime:'',
                show_modal_user:false,
                show_confirm_stop:false,
                show_confirm_start:false,
                loading_stop:false,
                loading_start:false,
                loading_download:false,
                chartData:'',
                data:'',
                myChart:'',
                chartOptions:'',
                placeholder:'--',
                loading_chart:false,
                loading_save:false,
                show_reportDetail:false,
                recommend:0,
                modalTitle:'',
                name:'',
                status:{
                    value:'',
                    text:'所有类型'
                },
                permission:{
                    value:'0',
                    text:'系统管理员'
                },
                permissionSelect:{
                    value:'',
                    text:'所有'
                },
                trend:[],
                curDetail:{},
                curId:'',
                list:[],
                listInfo:{},
                records:[],
                date:'',
                dateFrom:'',
                dateTo:'',
                mobile:'',
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasListInfo(){
                if(_.isEmpty(this.listInfo)) return false
                return true
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function

            showModalDetail(item,title){
                let name 
                if(item){
                    name = item.appName
                }
                this.modalTitle = title
                this.getTrend(name)
                this.loading_chart - true
                this.show_reportDetail = true
            },
            showConfirmStart(item){
                this.curId = item.id
                this.show_confirm_start = true
            },
            showConfirmStop(item){
                this.curId = item.id
                this.show_confirm_stop = true
            },
            saveApp(){
                this.loading_save = true
                allApi.saveAppInfo(this.appInfo)
                .then(result=>{
                    this.loading_save = false
                    this.show_addAppModal = false
                    this.getList(this.currentPage)
                })
                .catch(error => {
                    console.error(error)
                    this.loading_save = false
                })
            },
            stop(){
                this.loading_stop = true
                operateApi.pauseAllot({
                    id:this.curId
                })
                .then(result=>{
                    this.loading_stop = false
                    this.show_confirm_stop = false
                    this.getList(this.currentPage)
                })
                .catch(error => {
                    console.error(error)
                    this.loading_stop = false
                })
            },
            start(){
                this.loading_start = true
                operateApi.startAllot({
                    id:this.curId
                })
                .then(result=>{
                    this.loading_start = false
                    this.show_confirm_start = false
                    this.getList(this.currentPage)
                })
                .catch(error => {
                    console.error(error)
                    this.loading_start = false
                })
            },
            reGetList(){
                this.role = this.permissionSelect.value
                this.getList(1)
            },
            getList(num){
                this.loading = true
                operateApi.operatorList({
                    pageSize:10,
                    pageIndex:num,
                    role:this.permissionSelect.value,
                    stringDateFrom:this.startTime,
                    stringDateTo:this.endTime,
                })
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getRoleList(){
                operateApi.roleList()
                .then(result=>{
                    this.roleList = result
                })
                .catch(error => {
                    console.error(error)
                })
            },
            getDownLoadUrl(){
                this.loading_download = true
                operateApi.operatorListToExcel({
                    role:this.permissionSelect.value,
                    stringDateFrom:this.startTime,
                    stringDateTo:this.endTime,
                })
                .then(result=>{
                    this.loading_download = false
                    location.href = result.downloadUrl
                })
                .catch(error => {
                    console.error(error)
                    this.loading_download = false
                })
            }
        },
        created(){
            this.getList(1)
            this.getRoleList()
            // this.getTrend()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #operate-user{
        padding:0 40px 20px 40px;
        box-sizing:border-box;
        overflow:auto;
        .loading-min-height{
            min-height:300px;
        }
        .user-data{
            padding-bottom: 20px;
        }
        .user-data__list{
            display:flex;
            padding-top: 20px;
            min-height:140px;
        }
        .user-data__item{
            display:flex;
            flex-direction: column;
            justify-content:center;
            align-items:center;
            width: 200px;
            height:120px;
            border:1px solid $sectionColor;
            border-radius:4px;
            box-shadow:rgba(0, 0, 0, 0.03) 0px 1px 6px, rgba(0, 0, 0, 0.04) 0px 1px 4px;
            margin-right:20px;
            span{
                display: block;
                font-size: 30px;
                color:$green;
            }
            p{
                padding-top: 10px;
            }
        }
        .item-name{
            display: flex;
            align-items: center;
        }
        .item-status{
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #78e416;
            margin-right: 8px;
            &.offline{
                background-color:$grayLight
            }
        }
    }
</style>
